{% extends 'base.html' %}
{% load static %}

{% block title %}МОЙ НЕ САМ - Интернет-магазин{% endblock %}

{% block content %}
<!-- Слайдер -->
<div id="mainSlider" class="carousel slide mb-5" data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#mainSlider" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Слайд 1"></button>
        <button type="button" data-bs-target="#mainSlider" data-bs-slide-to="1" aria-label="Слайд 2"></button>
        <button type="button" data-bs-target="#mainSlider" data-bs-slide-to="2" aria-label="Слайд 3"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="{% static 'images/slide1.jpg' %}" class="d-block w-100" alt="Слайд 1">
            <div class="carousel-caption d-none d-md-block">
                <h2>Добро пожаловать в #МОЙНЕСАМ</h2>
                <p>Лучшие товары по доступным ценам</p>
                <a href="{% url 'catalog' %}" class="btn btn-primary">Перейти в каталог</a>
            </div>
        </div>
        <div class="carousel-item">
            <img src="{% static 'images/slide2.jpg' %}" class="d-block w-100" alt="Слайд 2">
            <div class="carousel-caption d-none d-md-block">
                <h2>Акции и скидки</h2>
                <p>Специальные предложения для наших клиентов</p>
                <a href="{% url 'catalog' %}" class="btn btn-primary">Смотреть акции</a>
            </div>
        </div>
        <div class="carousel-item">
            <img src="{% static 'images/slide3.jpg' %}" class="d-block w-100" alt="Слайд 3">
            <div class="carousel-caption d-none d-md-block">
                <h2>Быстрая доставка</h2>
                <p>Доставим заказ в любую точку страны</p>
                <a href="#" class="btn btn-primary">Подробнее</a>
            </div>
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#mainSlider" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Предыдущий</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#mainSlider" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Следующий</span>
    </button>
</div>

<!-- Популярные товары -->
<div class="container">
    <h2 class="mb-4">Популярные товары</h2>
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 mb-5">
        {% for product in popular_products %}
        <div class="col">
            <div class="card h-100 product-card">
                {% if product.image %}
                <img src="{{ product.image.url }}" class="card-img-top" alt="{{ product.name }}">
                {% else %}
                <div class="bg-light d-flex align-items-center justify-content-center" style="height: 200px;">
                    <span class="text-muted">Изображение отсутствует</span>
                </div>
                {% endif %}
                <div class="card-body">
                    <h5 class="card-title">{{ product.name }}</h5>
                    <p class="card-text text-muted">{{ product.description|truncatechars:100 }}</p>
                    <p class="card-text fw-bold">{{ product.price }} ₽</p>
                </div>
                <div class="card-footer bg-transparent border-top-0">
                    <div class="d-flex justify-content-between">
                        <a href="{% url 'product_detail' product.id %}" class="btn btn-outline-primary">Подробнее</a>
                        {% if request.user.is_authenticated %}
                        <a href="{% url 'add_to_cart' product.id %}" class="btn btn-primary">
                            <i class="bi bi-cart-plus"></i>
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12">
            <div class="alert alert-info">
                <p>Пока нет товаров для отображения.</p>
            </div>
        </div>
        {% endfor %}
    </div>
    
    <!-- Последние новости -->
    <h2 class="mb-4">Последние новости</h2>
    <div class="row mb-5">
        {% for news in latest_news %}
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                {% if news.image %}
                <img src="{{ news.image.url }}" class="card-img-top" alt="{{ news.title }}" style="height: 200px; object-fit: cover;">
                {% endif %}
                <div class="card-body">
                    <h5 class="card-title">{{ news.title }}</h5>
                    <p class="card-text text-muted">{{ news.created_at|date:"d.m.Y" }}</p>
                    <p class="card-text">{{ news.content|truncatechars:150 }}</p>
                </div>
                <div class="card-footer bg-transparent border-top-0">
                    <a href="{% url 'news_detail' news.id %}" class="btn btn-outline-primary stretched-link">Читать далее</a>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12">
            <div class="alert alert-info">
                <p>Пока нет новостей для отображения.</p>
            </div>
        </div>
        {% endfor %}
    </div>
    
    <!-- Преимущества -->
    <h2 class="mb-4">Почему выбирают нас</h2>
    <div class="row mb-5">
        <div class="col-md-4 mb-4">
            <div class="card h-100 text-center p-4">
                <div class="card-body">
                    <i class="bi bi-truck display-1 text-primary mb-3"></i>
                    <h4>Быстрая доставка</h4>
                    <p class="card-text">Доставляем товары в кратчайшие сроки по всей России.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card h-100 text-center p-4">
                <div class="card-body">
                    <i class="bi bi-shield-check display-1 text-primary mb-3"></i>
                    <h4>Гарантия качества</h4>
                    <p class="card-text">Все товары проходят тщательную проверку перед отправкой.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card h-100 text-center p-4">
                <div class="card-body">
                    <i class="bi bi-headset display-1 text-primary mb-3"></i>
                    <h4>Поддержка 24/7</h4>
                    <p class="card-text">Наша команда всегда готова ответить на ваши вопросы.</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}